
// 1.引入用来发送请求的方法，一定要补全路径
import { request } from "../../request/request.js"

Page({
  data: {
    catesMenuList: [], //左侧菜单数据
    catesMainList: [], //右侧商品数据
    currentIndex: 0, //选中状态
    scrollTop: 0 //右侧内容的滚动条距离顶部的距离
  },
  // 接口返回的数据
  Cates: [],
  // 页面开始加载 就会触发
  onLoad(options) {
    /*
     * 需求分析 -使用缓存技术
     * 1.先判断一下本地存储中有没有旧的数据 写法{time:Date.now(),data:[...]}
     * 2.没有旧数据，直接发送新的请求
     * 3.有旧的数据，同时旧的的数据也没有过期，就使用本地存储中的旧数据即可
     */
    // 1.获取本地存储中的数据 （小程序也有本地存储技术）
    const Cates = wx.getStorageSync("cates");
    // 2.判断
    if(!Cates){
      // 不存在，发送请求获取数据
      this.getCatesList();
    } else {
      // 有旧数据，定义过期时间， 10s 改成 5分钟
      if(Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCatesList();
      } else{
        // 可以使用旧数据
        this.Cates = Cates.data;
        let catesMenuList = this.Cates.map(v => v.cat_name);
        let catesMainList = this.Cates[0].children;
        this.setData({
          catesMenuList,
          catesMainList
        })
      }
    }

    //this.getCatesList();
  },
  // 获取分类数据
  getCatesList() {
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
      success: (result) => {
        this.Cates = result.data.message;
        // 把接口的数据存入到本地存储中
        //wx.setStorageSync("cates", {time:Deta.now(),data:this.Cates});

        // 构造左侧的大菜单数据
        let catesMenuList = this.Cates.map(v=>v.cat_name);
        // 构造右侧的商品数据
        let catesMainList = this.Cates[0].children;
        this.setData({
          catesMenuList,
          catesMainList
        })
        // console.log(result);
      }
    })
  },
  // 左侧菜单点击事件
  handleItemTap(e){
    /**
     * 1.获取被点击的标题身上的索引
     * 2.给data中的currentIndex赋值就可以了
     * 3.根据不同的索引来渲染右侧的商品内容
     * **/
     const { index } = e.currentTarget.dataset;

     let catesMainList = this.Cates[index].children;
     this.setData({
       currentIndex: index,
       catesMainList,
       scrollTop: 0 //重新设置右侧内容的scroll-view标签的距离顶部的距离
     })
    //console.log(e);
  }
})
